React Native Testing Library দিয়ে UI Testing

React Native Testing Library (RNTL) হলো একটি টুল যা React Native অ্যাপ্লিকেশনগুলির UI টেস্ট করার জন্য ব্যবহৃত হয়। এটি আপনাকে ব্যবহারকারী কীভাবে আপনার অ্যাপ্লিকেশন ব্যবহার করবে, সেই দৃষ্টিকোণ থেকে টেস্ট করতে সাহায্য করে। এর মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের (UI) কার্যকারিতা এবং আচরণ যাচাই করতে পারবেন।

RNTL এর মূল লক্ষ্য হলো ইউজার ইন্টারফেসের বিভিন্ন এলিমেন্টকে টেস্ট করা এবং এটি একেবারে ডোম উপাদান নয়, বরং অ্যাপ্লিকেশনটি ব্যবহারকারীর মতো ইন্টারঅ্যাক্ট করে টেস্ট করতে সহায়ক।

React Native Testing Library এর ইনস্টলেশন

প্রথমে, আপনার React Native প্রোজেক্টে React Native Testing Library এবং Jest (যা স্বয়ংক্রিয়ভাবে React Native প্রোজেক্টে অন্তর্ভুক্ত থাকে) ইনস্টল করতে হবে।

npm install --save-dev @testing-library/react-native

এছাড়া Jest এর কিছু প্রয়োজনীয় প্যাকেজ এবং ডিপেনডেন্সি আপডেট করা থাকতে পারে, যেমন:

npm install --save-dev jest react-test-renderer @testing-library/jest-native

UI টেস্টিং এর জন্য কিছু মৌলিক কনসেপ্ট

1. Render: render() ফাংশনটি কম্পোনেন্ট রেন্ডার করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি টেস্ট কম্পোনেন্টের UI কনটেন্ট পরীক্ষা করতে পারেন।
2. Query: findByText, findByTestId, getByPlaceholderText ইত্যাদি প্রশ্নের মাধ্যমে আপনি কম্পোনেন্টের এলিমেন্ট খুঁজে বের করতে পারেন।
3. Event: ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য fireEvent ব্যবহার করা হয়, যেমন বাটন ক্লিক করা বা ইনপুট ফিল্ডে টাইপ করা।

Basic UI Test Example (React Native)

ধরা যাক, আপনার একটি সিম্পল React Native অ্যাপ আছে, যেখানে একটি বাটন ক্লিক করার পর একটি টেক্সট পরিবর্তন হয়। আপনি এই অ্যাপটি React Native Testing Library ব্যবহার করে টেস্ট করবেন।

Component: CounterButton.js

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const CounterButton = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text testID="counterText">{count}</Text>
      <Button
        title="Increase Counter"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
};

export default CounterButton;

এটি একটি সিম্পল কম্পোনেন্ট যা একটি count ভেরিয়েবলকে হ্যান্ডেল করে এবং ব্যবহারকারী যখন বাটন ক্লিক করবে, তখন কনটেন্ট বেড়ে যাবে।

Test: CounterButton.test.js

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import CounterButton from './CounterButton';  // কম্পোনেন্টটি ইমপোর্ট

describe('CounterButton', () => {
  test('increments counter when button is pressed', () => {
    // Render the component
    const { getByText, getByTestId } = render(<CounterButton />);

    // Find the button and the initial counter text
    const button = getByText('Increase Counter');
    const counterText = getByTestId('counterText');

    // Initial count should be 0
    expect(counterText.props.children).toBe(0);

    // Simulate pressing the button
    fireEvent.press(button);

    // After pressing the button, the count should increase to 1
    expect(counterText.props.children).toBe(1);
  });
});

ব্যাখ্যা:

1. render(): এটি CounterButton কম্পোনেন্টকে রেন্ডার করে এবং আমাদের উপাদানগুলোকে টেস্টের জন্য প্রস্তুত করে।
2. getByText() এবং getByTestId(): এই ফাংশনগুলির মাধ্যমে আমরা বাটন এবং কাউন্টার টেক্সটকে সিলেক্ট করি। getByText টেক্সটের মাধ্যমে এলিমেন্ট খুঁজে পায় এবং getByTestId কম্পোনেন্টে testID অ্যাট্রিবিউট দিয়ে সিলেক্ট করতে সাহায্য করে।
3. fireEvent.press(): এটি ব্যবহারকারীর ইন্টারঅ্যাকশন সিমুলেট করে, যেমন বাটন ক্লিক করা।
4. expect(): এটি Jest এর assertions ফাংশন, যা আপনার প্রত্যাশিত ফলাফল চেক করতে ব্যবহৃত হয়। আমরা চেক করছি যে কাউন্টারটি সঠিকভাবে ইঙ্ক্রিমেন্ট হয়েছে কিনা।

UI টেস্টিং এর অন্যান্য কেস

1. ইনপুট ফিল্ডে টেক্সট টাইপ করা

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { TextInput, Button } from 'react-native';

test('should update text input value on change', () => {
  const { getByPlaceholderText } = render(
    <TextInput placeholder="Type here" />
  );

  const input = getByPlaceholderText('Type here');

  // Simulate typing into the input field
  fireEvent.changeText(input, 'Hello World');

  // Check if the input value is updated correctly
  expect(input.props.value).toBe('Hello World');
});

2. Visibility Checking

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import { Text, Button } from 'react-native';

const ToggleText = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <React.Fragment>
      {visible && <Text testID="text">This is visible now!</Text>}
      <Button title="Toggle Text" onPress={() => setVisible(!visible)} />
    </React.Fragment>
  );
};

test('should toggle text visibility on button press', () => {
  const { getByText, queryByTestId } = render(<ToggleText />);

  // Initially, text should not be visible
  expect(queryByTestId('text')).toBeNull();

  // After button press, text should be visible
  fireEvent.press(getByText('Toggle Text'));
  expect(queryByTestId('text')).toBeTruthy();
});

সারাংশ

• React Native Testing Library ব্যবহার করে আপনি UI এর কার্যকারিতা এবং ইন্টারঅ্যাকশন টেস্ট করতে পারেন।
• render() ফাংশনটি কম্পোনেন্ট রেন্ডার করে, fireEvent ব্যবহার করে আপনি ইউজারের ইন্টারঅ্যাকশন সিমুলেট করতে পারেন।
• Queries যেমন getByText, getByTestId, findByText ব্যবহার করে আপনি সহজেই UI উপাদান খুঁজে বের করতে পারেন এবং তাদের আচরণ পরীক্ষা করতে পারেন।
• Jest এর মাধ্যমে টেস্টগুলি চালানো হয়, যা অ্যানালাইসিস এবং ভুল শনাক্তকরণে সহায়ক।

এইভাবে, React Native Testing Library দিয়ে UI টেস্টিং করলে আপনার অ্যাপের UI সঠিকভাবে কাজ করছে কিনা, তা নিশ্চিত করা যায় এবং ব্যবহারকারী ইন্টারঅ্যাকশন সঠিকভাবে হ্যান্ডেল হচ্ছে কিনা তা যাচাই করা যায়।